import React, { useState } from 'react';
import { Form, Input, Icon, Button, Upload, message } from 'antd';
import _ from 'lodash';
import Eject from '@/components/Eject';
import * as apis from '@/services/SystemMgr';

const { TextArea } = Input;
const UploadModel = props => {
  const { attribute } = props;
  const { getFieldDecorator } = props.form;
  const [visible, setVisible] = useState(false);
  const [fileList, setFileList] = useState([]);
  const handleSubmit = () => {
    props.form.validateFields((err, values) => {
      if (!err) {
        const params = {
          downloadUrl: values.enclosure[0].fileUrl.filePath,
          fileDesc: values.fileDescribe,
          fileName: values.fileName,
          fileUrl: values.enclosure[0].fileUrl.previewUrl,
          id: values.enclosure[0].fileUrl.fileId,
        };
        apis.createOperGuideUsingPOST({ data: params }).then(result => {
          if (result && result.code * 1 === 1) {
            message.success('上传成功！');
            props.upData();
            setFileList([]);
            setVisible(false);
            props.form.resetFields();
          }
        });
      }
    });
  };
  // 点击确定上传
  const handleOkBtnClick = () => {
    handleSubmit();
  };

  // 打开关闭弹出
  const handleShowDrawer = () => {
    props.form.resetFields();
    setVisible(!visible);
  };
  // 附件列表
  const handleChange = async info => {
    if (_.isEmpty(info.fileList)) {
      setFileList([...info.fileList]);
    } else {
      const fromData = new FormData();
      fromData.append('file', info.file.originFileObj);
      apis.fileUploadUsingPOST_2({ data: fromData }).then(result => {
        if (result.code * 1 === 1) {
          const x = info.fileList[0];
          x.status = 'done';
          x.fileUrl = result.data;
          setFileList([x]);
        }
      });
    }
  };

  return (
    <Eject
      {...attribute}
      showDrawer={handleShowDrawer}
      onClose={handleShowDrawer}
      handleOkBtnClick={handleOkBtnClick}
      visible={visible}
      modelJsx={
        <Form labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
          <Form.Item label="文件名称">
            {getFieldDecorator('fileName', {
              initialValue: '',
              rules: [{ required: true, message: '文件名称不能为空！' }],
            })(<Input placeholder="输入内容" />)}
          </Form.Item>
          <Form.Item label="文件描述">
            {getFieldDecorator('fileDescribe', {
              initialValue: '',
              rules: [{ required: true, message: '文件描述不能为空！' }],
            })(<TextArea placeholder="输入内容" rows={3} />)}
          </Form.Item>
          <Form.Item label="上传附件">
            {getFieldDecorator('enclosure', {
              initialValue: '',
              rules: [{ required: true, message: '附件为空！' }],
              getValueFromEvent: e => {
                if (Array.isArray(e)) {
                  return e;
                }
                return e && e.fileList;
              },
            })(
              <Upload
                {...props}
                fileList={fileList}
                onChange={handleChange}
                showUploadList={{ showDownloadIcon: false }}
              >
                <Button disabled={fileList.length > 0}>
                  <Icon type="upload" /> 上传附件
                </Button>
              </Upload>,
            )}
          </Form.Item>
        </Form>
      }
    />
  );
};
const UploadJsx = Form.create({ name: 'normal_login' })(UploadModel);
export default UploadJsx;
